<template>
	<div id="login">
		<header class="top"><span>账号密码登录</span></header>
		<van-form @submit="onSubmit" class="login">
			<van-cell-group inset>
				<van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
					:rules="[{ required: true, message: '请填写用户名' }]" />
				<van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
					:rules="[{ required: true, message: '请填写密码' }]" />
			</van-cell-group>
			<div style="margin: 16px;">
				<van-button round block type="primary" native-type="submit" class="submit">登录</van-button>
			</div>
			<div class="regist">
				<a href="javascript:;">忘记密码？</a>
				<a href="javascript:;" @click="$router.push('/reg').catch(() =>{})">注册账号</a>
			</div>
		</van-form>
	</div>
</template>

<script>
	export default {
		name: "login",
		data() {
			return {
				username: "",
				password: "",
			}

		},
		mounted() {

		},
		methods: {
			onSubmit() {
				this.$axios({
					url: "/login",
					params: {
						username: this.username,
						password: this.password
					}
				}).then(
					(res) => {
						if (res.err === 0) {
							localStorage.setItem("user", JSON.stringify(res));
							this.$router.push("/user").catch(() =>{});
						} else {
							this.$dialog.alert({
								title: '用户名或密码有误'
							});
						}
					})
			}
		},
	}
</script>

<style scoped="scoped">
	#login {
		background-color: #fff;
	}

	.top {
		font-size: 0.4rem;
		text-align: center;
		line-height: 0.8rem;
		height: 0.8rem;
		position: relative;
		top: 25vw;
	}

	.login {
		position: relative;
		top: 50vw;
	}

	.login .submit {
		background-color: #fc4e46;
		border-radius: 5px;
		border: none;
	}

	.regist {
		display: flex;
		padding: 0.1rem 0.4rem;
		justify-content: space-between;
	}
</style>
